<template xmlns:margin-top="http://www.w3.org/1999/xhtml">
    <div class="view-main">
        <div class="view-header">
            <div>
                添加柜子111
            </div>
        </div>

        <div class="view-body">
            <div class="light-table">
                <el-row>
                    柜子：
                    <el-button type="primary" @click="addCabinet">添加</el-button>
                    <el-button type="primary" icon="el-icon-plus" @click="addOneCabinet"></el-button>
                </el-row>
                <el-row>
                    <!--展示柜子位置-->
                    <el-col :span="3" v-for="num in nums">
                    <div class="light-table" style="width:150px">
                        <div align="center" v-if="num==1">
                            主柜
                            <el-button type="primary" icon="el-icon-delete"></el-button>
                        </div>
                        <div align="center" v-else>
                            副柜
                            <el-button type="primary" icon="el-icon-delete" @click="deleteOneCabinet"></el-button>
                        </div>
                        <div style="margin-top: 20px; width:150px" align="center">
                            <el-checkbox-group v-model="checkboxGroup" size="medium" :min="0" :max="0" round="true">
                                <el-checkbox-button v-for="code in codes" :label="code" :key="code"
                                                    style="width:75px;height:50px">{{num}} - {{code}}</el-checkbox-button>
                            </el-checkbox-group>
                        </div>
                        <div>
                        </div>
                    </div>
                </el-col>
                    <!--导入组件-->

                </el-row>

                <el-row>
                    <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
                    <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
                    <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
                    <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
                    <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
                    <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
                </el-row>


            </div>
        </div>
        <!--添加柜子对话框-->
        <el-dialog class="no-bottom-padding user-dialog" :visible.sync="dialogVisible" width="480px" :close-on-click-modal="false">
            <el-form :model="addForm" :rules="addRules" ref="addForm" label-width="80px" size="mini" style="padding-right: 20px">
                <el-form-item label="类型" prop="type">
                    <el-input v-model="addForm.type" clearable></el-input>
                </el-form-item>
                <el-form-item label="行数" prop="rows">
                    <el-input v-model="addForm.rows" clearable></el-input>
                </el-form-item>
                <el-form-item label="列数" prop="cols">
                    <el-input v-model="addForm.cols" clearable></el-input>
                </el-form-item>
            </el-form>
            <!--编辑页面-->
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="updateConfirm('addForm')">确 定</el-button>
            </div>
        </el-dialog>


    </div>
</template>

<script>
    import { checkLoginName, checkPhone, checkEmail, checkObj, isEmpty, stringFormat } from '../../utils/util'
    import { getAction,putAction, downloadAction } from '@/utils/manage'
    const codeOptions = ['1', '2', '3', '4', '5', '6'];
    export default {
        name: 'user',
        data() {
            return {
                cabinetName:'主柜',
                Acabinet:'主柜',
                Bcabinet:'副柜',
                nums: 1,
                dialogVisible: false,
                addForm: {
                    type: '',
                    rows: 1,
                    cols: 1
                },
                checkboxGroup: [''],
                codes: codeOptions,

                addRules: {
                    type: [{ required: true, message: '请输入柜子类型', trigger: 'blur' }],
                    rows: [{ required: true, message: '请输入行数', trigger: 'blur' }],
                    cols: [{ required: true, message: '请输入列数', trigger: 'blur' }],
                }
            }
        },
        watch: {},
        created() {
        },
        methods: {
            addCabinet(){
                this.dialogVisible = true
                if (!isEmpty(this.$refs.addForm)) {
                    this.$refs.addForm.resetFields()
                }
            },
            addOneCabinet(){
                this.nums++;
            },
            deleteOneCabinet(){
                this.nums--;
            }
        }
    }
</script>
<style scoped>
    .el-row {
        margin-bottom: 20px;
    &:last-child {
         margin-bottom: 0;
     }
    }
    .el-col {
        border-radius: 4px;
    }
    .bg-purple-dark {
        background: #99a9bf;
    }
    .bg-purple {
        background: #d3dce6;
    }
    .bg-purple-light {
        background: #e5e9f2;
    }
    .grid-content {
        border-radius: 4px;
        min-height: 36px;
    }
    .row-bg {
        padding: 10px 0;
        background-color: #f9fafc;
    }
</style>
